<template>
  <!--:close-on-click-modal="false" 禁止点击弹窗遮罩，关闭弹窗-->
  <el-dialog :title="Dialog.DialogTtile" :visible.sync="isOpen" :width="Mobile == 'phone' ? '100%' : '65%'" :style="{height: Mobile == 'phone' ? '660px' : '',overflow:'auto',paddingTop: '12vh'}"
    @close="closeModal()" :close-on-click-modal="Mobile!=='phone'">
    <el-form class="forms" :model="form" :inline="true" :rules="Dialog.rules" label-position="right" ref="rulesForm" :validate-on-rule-change="false">
      <template v-for="(item, index) in Dialog.DialogFormType">
        <el-form-item :key="item.value" size="small" :label="item.name" :label-width="Mobile == 'phone'?'110px':'150px'"
          :prop="item.required ? item.value : ''" v-if="item.type != 'none'">
          <!-- 仅展示内容不能进行修改操作 -->
          <el-tooltip class="item" effect="dark" :content="form[item.value]" placement="top-start"
            v-if="item.type == 'text'">
            <el-input size="small" disabled style="width: 200px" v-model="form[item.value]"
              :placeholder="item.placeholder"></el-input>
          </el-tooltip>
          <!-- 文本框 -->
          <el-input v-else-if="item.type == 'input'" size="small" style="width: 200px" :placeholder="item.placeholder"
            v-model="form[item.value]"></el-input>
          <!-- 下拉框 -->
          <CustomSelect v-else-if="item.type == 'select'" v-model="form[item.value]" :placeholder="item.placeholder"
            :options="item.options" :type="item.Selecttype" />
          <!-- 时间选择器 -->
          <el-date-picker v-else-if="item.type == 'time'" size="small" style="width: 200px" v-model="form[item.value]"
            type="datetime" :placeholder="item.placeholder" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <!-- 图片上传 -->
          <UploadImg v-else-if="item.type == 'img'" :form="form" :value="item.value" :type="item.Imgtype"
            @ChangeImg="ChangeImg" style="width: 200px" />
          <!-- 文件上传 -->
          <File v-else-if="item.type == 'file'" :form="form" :value="item.value" :type="item.Imgtype"
            @ChangeFile="ChangeFile" @DelFile="DelFile" style="width: 200px" />
          <!-- 选择按钮 -->
          <el-tooltip class="item" effect="dark" :content="form[item.value]" placement="top-start"
            v-else-if="item.type == 'No'">
            <el-input style="width: 150px; margin-right: 10px" size="small" disabled v-model="form[item.value]"
              :placeholder="item.placeholder"></el-input>
          </el-tooltip>
          <el-button v-if="item.type == 'No'" size="mini" type="primary" icon="el-icon-circle-plus-outline"
            @click="SelectOrder(index, item.value)"></el-button>
        </el-form-item>
      </template>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button size="small" @click="isOpen = false">取 消</el-button>
        <el-button size="small" type="primary" @click="Submit">{{
    Dialog.DialogConfirmText
  }}</el-button>
      </span>
    </template>
    <!-- 选择表格弹窗列表 -->
    <OtherList ref="OtherListRef" :info="Dialog.DialogFormType[FormTypeIndex]" :Mobile="Mobile"
      @SelectionData="SelectionData" />
  </el-dialog>
</template>

<script>
import CustomSelect from "../CustomSelect/index.vue"; // 下拉框组件
import UploadImg from "../Upload/Img.vue"; // 上传图片组件
import File from "../Upload/FileUpload.vue"; // 上传文件组件
import OtherList from "../OtherList/index.vue"; // 选择列表模块

export default {
  name: "DialogFrom",
  props: {
    Dialog: {
      type: Object,
      default: function () {
        return {};
      },
    },
    Mobile: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isOpen: false, // 弹窗的显示控制
      form: {}, // form表单
      FormTypeIndex: 0, // FormTypeIndex的下标
      multipleSelection: {}, // 选择后的数据
    };
  },
  computed: {
    processedProp() {
      // 在这里处理props值并返回
      return this.Dialog;
    },
  },
  created() { },
  mounted() { },
  watch: {},
  methods: {
    // 打开弹窗
    openModal(type) {
      // console.log(type);
      this.isOpen = true;
      // console.log(this.processedProp, "this.Dialog?.DialogForm ");
      this.$nextTick(() => {
        this.form = this.processedProp?.DialogForm || {};
        // console.log(this.form, "this.Dialog?.DialogForm ");
        if (type == "CreateDialog") this.$refs.rulesForm.resetFields();
        else this.$refs.rulesForm.clearValidate();
      });
    },
    // 关闭弹窗
    closeModal() {
      this.$refs.rulesForm.resetFields();
      this.isOpen = false;
    },
    // 图片上传
    ChangeImg(e) {
      // console.log(e);
      this.form[e.value] = e.fileRaw;
      this.$set(this.form, "img", e.img);
    },
    // 文件上传
    ChangeFile(e) {
      // console.log(e);
      this.form[e.value] = e.file;
    },
    // 文件删除
    DelFile(e) {
      this.form[e.value] = "";
    },
    // 打开选择弹窗模块
    SelectOrder(index, value) {
      // console.log(index, value);
      this.FormTypeIndex = index;
      this.$refs.OtherListRef.openModal();
    },
    // 选择回来的弹窗模块
    // SelectionData(e) {
    //   console.log(e);
    //   this.multipleSelection = e;
    //   const { DialogFormType } = this.Dialog;
    //   if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "换货选择库存" ||
    //     DialogFormType[this.FormTypeIndex].ShowValue == "发货选择库存" ||
    //     DialogFormType[this.FormTypeIndex].ShowValue == "退货选择库存"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] =
    //       e.supplier_name + "-" + e.warehouse_name;
    //   } else if (DialogFormType[this.FormTypeIndex].ShowValue == "选择订单") {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.order_id;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "换货选择订单"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.orderId;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "备货入库选择sku" ||
    //     DialogFormType[this.FormTypeIndex].ShowValue == "退货入库选择sku"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.ware_id;
    //     this.form.sku_name = e.name;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "新订单出库选择库存商品"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.id;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "新订单出库选择发货表"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.orderId;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "新增退款退货订单"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.orderId;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "新增退款跟进明细"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.order_id;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "换货出库选择发货表"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.order_id;
    //   } else if (
    //     DialogFormType[this.FormTypeIndex].ShowValue == "换货出库选择库存商品"
    //   ) {
    //     this.form[DialogFormType[this.FormTypeIndex].value] = e.id;
    //   }
    // },
    SelectionData(e) {
      // console.log(e);
      this.multipleSelection = e;

      const showValue = this.Dialog.DialogFormType[this.FormTypeIndex].ShowValue;
      const formTypeValue = this.Dialog.DialogFormType[this.FormTypeIndex].value;

      // 定义映射表，将 ShowValue 映射到对应的处理函数
      const formMapping = {
        "换货选择库存": () => this.form[formTypeValue] = `${e.supplier_name}-${e.warehouse_name}`,
        "发货选择库存": () => this.form[formTypeValue] = `${e.supplier_name}-${e.warehouse_name}`,
        "退货选择库存": () => this.form[formTypeValue] = `${e.supplier_name}-${e.warehouse_name}`,
        "选择订单": () => this.form[formTypeValue] = e.order_id,
        "换货选择订单": () => this.form[formTypeValue] = e.orderId,
        "备货入库选择sku": () => {
          this.form[formTypeValue] = e.ware_id;
          this.form.sku_name = e.name;
        },
        "退货入库选择sku": () => {
          this.form[formTypeValue] = e.ware_id;
          this.form.sku_name = e.name;
        },
        "新订单出库选择库存商品": () => this.form[formTypeValue] = e.id,
        "新订单出库选择发货表": () => this.form[formTypeValue] = e.orderId,
        "新增退款退货订单": () => this.form[formTypeValue] = e.orderId,
        "新增退款跟进明细": () => this.form[formTypeValue] = e.order_id,
        "换货出库选择发货表": () => this.form[formTypeValue] = e.order_id,
        "换货出库选择库存商品": () => this.form[formTypeValue] = e.id
      };

      // 使用映射表来处理 ShowValue 对应的逻辑
      if (formMapping[showValue]) {
        formMapping[showValue]();
      }
    },
    // 提交信息
    Submit() {
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          this.$emit("Submit", {
            form: this.form,
            DialogTtile: this.Dialog.DialogTtile,
            multipleSelection: this.multipleSelection,
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  components: {
    CustomSelect,
    UploadImg,
    File,
    OtherList,
  },
};
</script>

<style scoped lang="less">
/deep/.el-dialog{
  margin:0 auto !important;
}
/deep/.el-dialog .el-dialog__body{
  overflow: auto;
  max-height:460px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #DCDEE2;
}
/deep/.el-dialog__footer {
  border-top: 1px solid #DCDEE2;
  padding: 10px 20px;
}
.forms{
  /deep/ .el-form-item {
    margin-bottom: 18px !important;
  }
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px !important;
  height: 120px !important;
  line-height: 120px !important;
  text-align: center;
}
</style>
